<template>
  <div v-loading="loading" :element-loading-text="loadingText" class="config-edit">
    <div v-show="!showPicDetail">
      <div class="bread-box but20">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item class="btn-green" style=" color: #3DC094;" @click.native="handleBack">环境成品配置</el-breadcrumb-item>
          <el-breadcrumb-item>环境成品配置单</el-breadcrumb-item>
        </el-breadcrumb>
        <div>
          <el-button size="mini" @click="handleBack">取消</el-button>
          <el-button type="primary" size="mini" @click="handleSave">保存</el-button>
          <el-button type="primary" size="mini" @click="clickNextStep">提交</el-button>
        </div>
      </div>
      <c-list :column="3">
        <c-list-item label="产品配置单" :value="formData.configCode" />
        <c-list-item label="对应产品配置任务" :value="formData.configTaskCode" />
        <c-list-item label="任务来源" dict-type-code="PRODUCT_CONFIG_TASK_SOURCE" :value="formData.source" />
        <c-list-item label="来源图纸" :value="formData.picTaskCode" />
        <c-list-item label="来源图纸名称" :value="formData.picTaskName" />
        <c-list-item label="产品配置类型" dict-type-code="PRO_CONFIG_TYPE" :value="formData.proConfigType" />
        <c-list-item label="产品配置进度" dict-type-code="PRO_CONFIG_SCHEDULE" :value="formData.schedule" />
        <c-list-item label="是否含自主配置" dict-type-code="BOOLEANS" :value="formData.haveSelfSampleLoad" />
        <c-list-item label="门店建设项目号" :value="formData.constCode" />
        <c-list-item label="所属门店编码" :value="formData.shopCode" />
        <c-list-item label="所属门店名称" :value="formData.shopName" />
        <c-list-item label="所属客户编码" :value="formData.clientCode" />
        <c-list-item label="所属客户名称" :value="formData.clientName" />
        <c-list-item label="所属办事处" :value="formData.officeName" />
        <c-list-item label="审核结果" dict-type-code="REVIEW_RESULT" :value="formData.reviewResult" />
        <c-list-item label="审核意见" :value="formData.reviewAdvice" />
        <c-list-item label="创建人" :value="formData.createBy" />
        <c-list-item label="创建时间" :value="formData.createTime" />
        <c-list-item label="修改人" :value="formData.lastUpdateBy" />
        <c-list-item label="修改时间" :value="formData.lastUpdateTime" />
      </c-list>
      <!-- <RelevanceDrawing :other-filters="otherFilters" /> -->
      <c-section title="关联图纸信息">
        <c-table-box hide-func :data="formData.designPictureDtos" :table-config="tableConfig" />
      </c-section>
      <c-section title="产品出图明细">
        <div class="btn-container">
          <el-button type="primary" @click="clickRecommend">选择推荐型号</el-button>
          <el-button type="primary" @click="clickMatch">选择搭配型号</el-button>
          <el-button type="primary" @click="clickBat">批量选择产品</el-button>
          <el-button type="primary" @click="delTableData">删除</el-button>
        <!-- <el-button type="primary">导出</el-button> -->
        </div>
        <div>
          <el-table
            ref="outpicTable"
            v-loading="tableLoading"
            element-loading-text="加载中"
            :data="outpicCategoryData"
            border
            highlight-current-row
            :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
            style="width: 100%; margin-top: 20px; margin-bottom: 20px"
            @selection-change="selectionChangeHandle"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" width="50" label="序号" />
            <el-table-column prop="categoryName" label="品类" min-width="150" />
            <el-table-column prop="modelName" label="型号" show-overflow-tooltip min-width="150" />
            <el-table-column prop="seriesName" label="所属系列" min-width="150" />
            <el-table-column prop="recommendType" label="推荐类别" show-overflow-tooltip min-width="150">
              <template slot-scope="scope">
                <span>{{ formaterData(recommendTypeList, scope.row.recommendType) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="productCode" label="产品" min-width="150">
              <template slot-scope="scope">
                <input-with-dialog
                  v-model="scope.row.productArr"
                  :props="{label:'productName',value:'productCode'}"
                  :config="scope.row.productConfig"
                  @change="productChange(scope.row)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="productState" label="产品状态" min-width="150">
              <template slot-scope="scope">
                <span>{{ formaterData(proStateList, scope.row.productState) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="pcontrolState" label="采购控制状态" min-width="150">
              <template slot-scope="scope">
                <span>{{ formaterData(canBePurchaseList, scope.row.pcontrolState) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="productNumber" label="产品数量" min-width="150">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.productNumber" type="number" size="mini" placeholder="请输入数量" min="1" @blur="handelBlur(scope.row)" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </c-section>
    </div>
    <detail v-if="showPicDetail" :shop-config-data="rowId" page-flag="shopConfig" :page-show.sync="showPicDetail" @goBack="backDetail" />
    <div>
      <add-model v-if="showRecommendDlg" ref="recommend" :visible.sync="showRecommendDlg" :detail-data="recommendData" @success="getRecommendData" />
      <add-product v-if="showProductDlg" ref="productDlg" :visible.sync="showProductDlg" :detail-data="proData" @success="getProductData" @goLastPage="goLastPage" />
      <add-match-product v-if="showMatchDlg" ref="matchDlg" :visible.sync="showMatchDlg" :detail-data="matchModelData" @success="getMatchData" />
      <!-- <recommend v-if="showRecommendDlg" ref="recommend" :visible.sync="showRecommendDlg" :detail-data="activedData" @success="getRecommendData" /> -->
      <!-- <match v-if="showMatchDlg" ref="match" :visible.sync="showMatchDlg" :detail-data="activedData" @success="getMatchData" /> -->
      <!-- <bat-select v-if="showBatSelectDlg" ref="match" :visible.sync="showBatSelectDlg" :detail-data="activedData" @success="getMatchData" /> -->
    </div>
  </div>
</template>
<script>
import { getProConfigEditData, saveProConfigEditData, queryCategoryData } from '@/api/proConfig'
import AddModel from './components/addModel.vue'
import AddProduct from './components/addProduct.vue'
import AddMatchProduct from './components/addMatchModel.vue'
import detail from '../../../shopDrawing/management/detail.vue'
import { getDictByTypeCode } from '@/api/proConfig'
import { getDictByPatchType } from '@/api/dataDict'
import { getAreaData } from '../../task/components/index'
// import Match from '../../finished/configEdit/match.vue'
// import Recommend from '../../finished/configEdit/recommend.vue'
// import BatSelect from '../../finished/configEdit/batSelect.vue'
// import RelevanceDrawing from '../../components/relevanceDrawing'
export default {
  name: 'PCEnvironmentConfigEdit',
  components: {
    AddModel,
    AddProduct,
    AddMatchProduct,
    detail
    // RelevanceDrawing
    // Recommend,
    // Match
    // BatSelect
  },
  data() {
    return {
      rowId: '',
      showPicDetail: false,
      loading: false,
      loadingText: '',
      showRecommendDlg: false,
      showProductDlg: false,
      showMatchDlg: false,
      areaList: [],
      tableSelected: [],
      proStateList: [],
      canBePurchaseList: [],
      recommendTypeList: [],
      designRangeList: [],
      decorationTypeList: [],
      designSpaceList: [],
      designBizTypeList: [],
      otherFilters: [],
      tmpRecommendList: [],
      tmpMatchList: [],
      detailArr: [],
      recommendData: {},
      proData: {},
      matchModelData: {},
      formData: {
        designPictureDtos: []
      },
      outpicCategoryData: [],
      categoryArr: [],
      tableConfig: {
        setting: [
          {
            prop: 'picTaskCode',
            label: '图纸编码',
            minWidth: 100,
            className: 'btn-green',
            isButton: true,
            clickFun: this.toPicDetail
          },
          {
            prop: 'picType',
            label: '图纸类型',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_TYPE'
            },
            minWidth: 100
          },
          {
            prop: 'designRange',
            label: '设计范围',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.designRange) {
                return
              }
              let list = []
              if (typeof (row.designRange) === 'string') {
                list = row.designRange.split(',')
              } else {
                list = row.designRange
              }
              const arr = []
              this.areaList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'decorationType',
            label: '装修形式',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.decorationType) {
                return
              }
              let list = []
              if (typeof (row.decorationType) === 'string') {
                list = row.decorationType.split(',')
              } else {
                list = row.decorationType
              }
              const arr = []
              this.decorationTypeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'designSpace',
            label: '设计区域',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.designSpace) {
                return
              }
              let list = []
              if (typeof (row.designSpace) === 'string') {
                list = row.designSpace.split(',')
              } else {
                list = row.designSpace
              }
              const arr = []
              this.areaList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'designBizType',
            label: '设计业务类型',
            minWidth: 140,
            render: (creat, row) => {
              if (!row.designBizType) {
                return
              }
              let list = []
              if (typeof (row.designBizType) === 'string') {
                list = row.designBizType.split(',')
              } else {
                list = row.designBizType
              }
              const arr = []
              this.designBizTypeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'picTotalArea',
            label: '设计总面积',
            minWidth: 120
          },
          // {
          //   prop: 'finishedProductAreaSummary',
          //   label: '成品业务面积汇总',
          //   minWidth: 100
          // },
          {
            prop: 'softwareSumArea',
            label: '软体区面积',
            minWidth: 120
          },
          {
            prop: 'suiteSumArea',
            label: '套房区面积',
            minWidth: 120
          },
          {
            prop: 'haveEAndC',
            label: '是否含成融定',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            },
            minWidth: 140
          },
          {
            prop: 'eandCArea',
            label: '成融定面积',
            minWidth: 120
          },
          {
            prop: 'newBusinessAreaSummary',
            label: '新业务面积汇总',
            minWidth: 100
          },
          {
            prop: 'expectEndTime',
            label: '预计设计完成时间',
            minWidth: 140
          },
          {
            prop: 'designUnitName',
            label: '设计单位',
            minWidth: 100
          },
          {
            prop: 'designerName',
            label: '设计师',
            minWidth: 100
          },
          {
            prop: 'schedule',
            label: '图纸进度',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_DESIGN_SCHEDULE'
            },
            minWidth: 100
          },
          {
            prop: 'state',
            label: '图纸状态',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_DESIGN_STATE'
            },
            minWidth: 100
          }
        ]
      }
    }
  },
  async created() {
    this.loading = true
    this.loadingText = '加载中'
    await this.getDictByPatchTypeAll(['PRODUCT_STATE', 'CAN_BE_PURCHASE']).then(res => {
      this.proStateList = res.PRODUCT_STATE
      this.canBePurchaseList = res.CAN_BE_PURCHASE
    }).catch(() => {
      this.loading = false
      this.loadingText = ''
    })
    await this.getDictByTypeCode(['RECOMMEND_TYPE', 'DECORATION_RANGE',
      'DECORATION_FORM', 'BELONG_REGION', 'BIZ_TYPE']).then(res => {
      this.recommendTypeList = res.RECOMMEND_TYPE
      this.designRangeList = res.DECORATION_RANGE // 设计范围
      this.decorationTypeList = res.DECORATION_FORM // 装修形式
      this.designSpaceList = res.BELONG_REGION // 设计区域
      this.designBizTypeList = res.BIZ_TYPE // 设计业务类型
    }).catch(() => {
      this.loading = false
      this.loadingText = ''
    })
    this.areaList = await getAreaData()
    this.formData.id = this.$route.params.id
    getProConfigEditData(this.formData.id).then(async res => {
      if (res.success && res.data) {
        this.formData = res.data
        this.outpicCategoryData = this.formData.configOutPicDtos ? this.formData.configOutPicDtos[0].configDetailDtos : []
        // if (this.formData.designPictureDtos.length) {
        //   // this.getOutpicCategory(this.formData.designPictureDtos)
        // }
        if (this.outpicCategoryData.length > 0) {
          await this.getfinalLevel(this.outpicCategoryData)
          this.outpicCategoryData.forEach(item => {
            item.outpicCategoryNumberId = item.id
            const productConfig = {
              title: '产品',
              interfacePath: `/select-service/api/v1/productInfo/page`,
              setting: [{ prop: 'productCode', title: '编码' },
                { prop: 'productName', title: '名称' }],
              filtersRaw: [{ 'id': 'proState', 'property': 'proState', 'operator': '=', 'value': 'E' },
                { 'id': 'prodModelCode', 'property': 'prodModelCode', 'operator': '=', 'value': item.modelCode },
                { 'id': 'productCategoryCode', 'property': 'productCategoryCode', 'operator': 'in', 'value': item.childCategory }]
            }
            const productArr = [{ label: item.productDesc, value: item.productCode }]
            this.$set(item, 'productConfig', productConfig)
            this.$set(item, 'productArr', productArr)
          })
        }
      }
      this.loading = false
      this.loadingText = ''
    }).catch(() => {
      this.loading = false
      this.loadingText = ''
    })
  },
  methods: {
    // 获取数据字典
    async getDictByPatchTypeAll(data) {
      const obj = await getDictByTypeCode(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 获取数据字典
    async getDictByTypeCode(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 格式化数据
    formaterData(arr, dictCode) {
      if (!arr || !arr.length) return
      const tmpArr = arr.filter(item => item.dictCode === dictCode)
      if (tmpArr.length) {
        return tmpArr[0].dictName
      }
      return dictCode
    },
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    },
    // 修改数量11
    handelBlur(row) {
      const num = Number(row.productNumber)
      if (isNaN(num) || num < 1 || (num % 1 !== 0)) {
        row.productNumber = 1
        this.$message.warning('请输入大于或等于1的整数')
      }
    },
    // 获取末级品类
    async getfinalLevel(arr) {
      const plCodesArr = arr.map(item => item.categoryCode)
      const plCodes = this.removeEqualData(plCodesArr)
      const plDataArr = await this.getCategoryData(plCodes, 'A')
      const unFinalLevel = plDataArr.filter(item => item.isFinalLevel === '0')
      const finalLevel = plDataArr.filter(item => item.isFinalLevel === '1')
      const unFinalPlArr = unFinalLevel.map(item => item.code)
      const plfinaArr = await this.getCategoryData(unFinalPlArr, 'B')
      const categoryArr = [...finalLevel, ...plfinaArr]
      arr.forEach(row => {
        const codeArr = []
        // row.childCategory = []
        categoryArr.forEach(item => {
          if (item.parentCode && item.parentCode === row.categoryCode) {
            codeArr.push(item.code)
          } else if (!item.parentCode && item.code === row.categoryCode) {
            codeArr.push(item.code)
          }
          row.childCategory = '[' + codeArr.join(',') + ']'
        })
      })
    },
    // // 获取出图品类及数量
    // getOutpicCategory(arr) {
    //   const ids = arr.map(item => item.id)
    //   this.picIds = ids
    //   queryOutpicCategory(ids).then(res => {
    //     if (res.success && res.data && res.data.records) {
    //       this.outpicCategoryData = res.data.records
    //       if (this.outpicCategoryData.length > 0) {
    //         this.outpicCategoryData.forEach(item => {
    //           item.outpicCategoryNumberId = item.id
    //           const productConfig = {
    //             title: '产品',
    //             interfacePath: `/select-service/api/v1/productInfo/page`,
    //             setting: [{ prop: 'productCode', title: '编码' },
    //               { prop: 'productName', title: '名称' }],
    //             filtersRaw: [{ 'id': 'proState', 'property': 'proState', 'operator': '=', 'value': 'E' },
    //               { 'id': 'prodModelCode', 'property': 'prodModelCode', 'operator': '=', 'value': item.modelCode },
    //               { 'id': 'productCategoryCode', 'property': 'productCategoryCode', 'operator': '=', 'value': item.categoryCode }]
    //           }
    //           this.$set(item, 'productConfig', productConfig)
    //         })
    //       }
    //     }
    //   }).catch(() => {
    //     this.loading = false
    //     this.loadingText = ''
    //   })
    // },
    removeEqualData(arr) {
      const newArr = []
      for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
          newArr.push(arr[i])
        }
      }
      return newArr
    },
    // 获取品类
    async getCategoryData(arr, flag) {
      const codes = '[' + arr.join(',') + ']'
      let filterRow = []
      if (flag === 'A') {
        filterRow = [{ 'id': 'code', 'property': 'code', 'operator': 'in', 'value': codes }]
      } else if (flag === 'B') {
        filterRow = [{ 'id': 'parentCode', 'property': 'parentCode', 'operator': 'in', 'value': codes }]
      }
      const dataForm = new FormData()
      dataForm.append('pageFlag', false)
      dataForm.append('filtersRaw', JSON.stringify(filterRow))
      // let list = []
      return await queryCategoryData(dataForm).then(res => {
        if (res.success) {
          return res.data.records
        }
      })
      // return list
    },
    // // 选择产品
    productChange(row) {
      if (row.productArr && row.productArr.length) {
        row.productDesc = row.productArr[0].productName
        row.productCode = row.productArr[0].productCode
        row.productState = row.productArr[0].proState
        row.pcontrolState = row.productArr[0].canBePurchase
      }
    },
    // 选择推荐型号
    clickRecommend(data) {
      this.recommendData.otherFilter = this.outpicCategoryData
      if (data) {
        this.recommendData.lastSelected = data.lastSelected
      }
      this.showRecommendDlg = true
      this.tmpRecommendList = []
    },
    // 批量选择产品
    clickBat() {
      if (!this.tableSelected.length) {
        this.$message.warning('请选择【批量选择产品】项')
        return
      }
      this.proData.data = this.tableSelected
      this.proData.flag = 'change'
      this.showProductDlg = true
    },
    // 选择搭配型号
    clickMatch(data) {
      if (!this.outpicCategoryData.length) {
        this.$message.warning('请先选择推荐型号')
        return
      }
      const tableRecomModel = this.outpicCategoryData.filter(item => item.recommendType === 'RECOMMEND')
      // if (!tableRecomModel.length && !this.tableSelected.length) {
      //   this.$message.warning('出图明细数据中不存在推荐类别为推荐产品的数据，请先选择推荐型号')
      //   return
      // }
      this.matchModelData.queryCodes = tableRecomModel
      if (this.tableSelected.length) {
        this.matchModelData.queryCodes = this.tableSelected
        // tableRecomModel = this.outpicCategoryData.filter(item => item.recommendType === 'RECOMMEND')
      }
      if (data) {
        this.matchModelData.lastSelected = data.lastSelected
      }
      this.matchModelData.selectedCodes = this.outpicCategoryData
      this.showMatchDlg = true
      // this.$router.push({ name: 'PCFinishedConfigEditMatch' })
    },
    // 获取推荐型号
    getRecommendData(data) {
      console.log('3456789', data)
      this.tmpRecommendList = [...data.data]
      this.proData.data = this.tmpRecommendList
      this.proData.flag = 'RECOMMEND'
      this.proData.lastSelected = data.lastSelected
      this.showProductDlg = true
      this.getfinalLevel(this.tmpRecommendList)
    },
    // 获取搭配型号
    getMatchData(data) {
      this.tmpRecommendList = [...data.data]
      this.proData.data = this.tmpRecommendList
      this.proData.flag = 'MATCH'
      this.proData.lastSelected = data.lastSelected
      this.showProductDlg = true
      this.getfinalLevel(this.tmpRecommendList)
    },
    // 获取选中产品
    getProductData(data) {
      // let arr = []
      const changeproArr = data.filter(item => {
        const index = this.outpicCategoryData.findIndex(row => item.modelCode === row.modelCode && item.categoryCode === row.categoryCode)
        return index !== -1
      })
      // this.outpicCategoryData.forEach(row => {
      //   arr = data.filter(item => item.modelCode === row.modelCode && item.categoryCode === row.categoryCode)
      // })
      if (changeproArr.length) {
        this.outpicCategoryData.forEach(row => {
          changeproArr.forEach(a => {
            if (a.modelCode === row.modelCode && a.categoryCode === row.categoryCode) {
              row.recommendType = a.recommendType
              row.productCode = a.productCode
              row.productDesc = a.productDesc
              const productArr = [{ label: a.productDesc, value: a.productCode }]
              this.$set(row, 'productArr', productArr)
              const productConfig = {
                title: '产品',
                interfacePath: `/select-service/api/v1/productInfo/page`,
                setting: [{ prop: 'productCode', title: '编码' },
                  { prop: 'productName', title: '名称' }],
                filtersRaw: [{ 'id': 'proState', 'property': 'proState', 'operator': '=', 'value': 'E' },
                  { 'id': 'prodModelCode', 'property': 'prodModelCode', 'operator': '=', 'value': row.modelCode },
                  { 'id': 'productCategoryCode', 'property': 'productCategoryCode', 'operator': 'in', 'value': row.childCategory }]
              }
              this.$set(row, 'productConfig', productConfig)
              row.productState = a.productState
              row.pcontrolState = a.purchaseControlState
              row.productNumber = 1
            }
          })
        })
      } else {
        this.tmpRecommendList.forEach(item => {
          data.forEach(data => {
            if (data.modelCode === item.modelCode && data.categoryCode === item.categoryCode) {
              item.recommendType = data.recommendType
              item.productCode = data.productCode
              item.productDesc = data.productDesc
              const productArr = [{ label: data.productDesc, value: data.productCode }]
              this.$set(item, 'productArr', productArr)
              const productConfig = {
                title: '产品',
                interfacePath: `/select-service/api/v1/productInfo/page`,
                setting: [{ prop: 'productCode', title: '编码' },
                  { prop: 'productName', title: '名称' }],
                filtersRaw: [{ 'id': 'proState', 'property': 'proState', 'operator': '=', 'value': 'E' },
                  { 'id': 'prodModelCode', 'property': 'prodModelCode', 'operator': '=', 'value': item.modelCode },
                  { 'id': 'productCategoryCode', 'property': 'productCategoryCode', 'operator': 'in', 'value': item.childCategory }]
              }
              this.$set(item, 'productConfig', productConfig)
              item.productState = data.productState
              item.pcontrolState = data.purchaseControlState
              item.productNumber = 1
            }
          })
        })
        const newTableData = JSON.parse(JSON.stringify(this.tmpRecommendList))
        this.outpicCategoryData = [...newTableData, ...this.outpicCategoryData]
      }
    },
    // 删除
    delTableData() {
      if (!this.tableSelected.length) {
        this.$message.warning('请选择【删除】项')
        return
      }
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.outpicCategoryData.length === this.tableSelected.length) {
          this.outpicCategoryData = []
          return
        }
        const tmpData = this.outpicCategoryData.filter(row => {
          const index = this.tableSelected.findIndex(v => v.modelCode === row.modelCode && v.categoryCode === row.categoryCode)
          return index === -1
        })
        this.outpicCategoryData = tmpData
        this.tableSelected = []
        this.$refs.outpicTable.clearSelection()
      })
    },
    // 查看图纸详情
    toPicDetail(row) {
      this.rowId = row
      this.showPicDetail = true
    },
    // 返回配置详情
    backDetail() {
      this.showPicDetail = false
    },
    // 取消
    handleBack() {
      this.formData = {}
      this.outpicCategoryData = []
      this.$store.dispatch('views/goBack')
    },
    goLastPage(data) {
      if (data.flag === 'recommend') {
        console.log('返回推荐型号', data)
        this.clickRecommend(data)
      } else if (data.flag === 'match') {
        this.clickMatch(data)
      }
    },
    // 保存
    handleSave() {
      this.loading = true
      this.loadingText = '系统处理中'
      const picIds = this.formData.designPictureDtos.map(item => item.id)
      this.formData.picIds = picIds
      // this.formData.productConfigDetailDtos = this.outpicCategoryData
      this.formData.productConfigOutpicDtos = []
      const prodObj = {}
      prodObj.configDetailDtos = this.outpicCategoryData
      this.formData.productConfigOutpicDtos.push(prodObj)
      saveProConfigEditData(this.formData).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.handleBack()
        }
        this.loading = false
        this.loadingText = ''
      }).catch(() => {
        this.loading = false
        this.loadingText = ''
      })
    },
    // 提交
    clickNextStep() {
      if (!this.outpicCategoryData.length) {
        this.$message.warning('请添加产品配置清单')
        return
      }
      const flag = this.outpicCategoryData.some(item => !item.productCode)
      if (flag) {
        this.$message.warning('请完善产品配置清单')
        return
      }
      this.loading = true
      this.loadingText = '系统处理中'
      const picIds = this.formData.designPictureDtos.map(item => item.id)
      this.formData.picIds = picIds
      // this.formData.productConfigDetailDtos = this.outpicCategoryData
      const prodObj = {}
      prodObj.configDetailDtos = this.outpicCategoryData
      this.formData.productConfigOutpicDtos.push(prodObj)
      this.formData.schedule = 'B'
      // console.log('1111', this.formData.productConfigOutpicDtos[0].configDetailDtos)
      // return
      saveProConfigEditData(this.formData).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.handleBack()
        }
        this.loading = false
        this.loadingText = ''
      }).catch(() => {
        this.loading = false
        this.loadingText = ''
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.but20{ margin-bottom: 20px;}
.el-breadcrumb__inner .btn-green{
    color: #3DC094;
}
/deep/.el-breadcrumb__inner{
  color: $qup-color-primary;
}
</style>
